<template>
  <div id="Integral">
    <div
      class="banner_box"
      :style="{'backgroundImage':'url('+ banner +')',backgroundRepeat: 'no-repeat', backgroundSize: '100% 100%',backgroundPosition: 'center'}"
    >
      <div class="banner_content_box">
        <div class="content_box">
          <div class="p1">
            10000
          </div>
          <div class="p2">
            当期成长值
          </div>
        </div>
        <div class="sanjiao_box" />
        <div class="titme">
          <p>2018.11.01-2019.10.31</p>
        </div>
        <div class="tip">
          每月3号结算12个月内的成长值
        </div>
      </div>
    </div>
    <div class="big_content_box">
      <div class="content_box">
        <div class="top_box">
          <div class="item">
            <div class="img_box">
              <img src="../../assets/img/jf_03.png">
            </div>
            <div class="title">
              购物送积分
            </div>
            <div class="title_2">
              额外赠最高100积分
            </div>
            <div
              class="button"
              @click="GoToIndex"
            >
              去购物
            </div>
          </div>

          <div class="item">
            <div class="img_box">
              <img src="../../assets/img/vip_03.png">
            </div>
            <div class="title">
              超级会员
            </div>
            <div class="title_2">
              超级会员购物享双倍积分
            </div>
            <div class="button">
              去开通
            </div>
          </div>
          <div class="item">
            <div class="ewma">
              <img src="../../assets/img/erw_03.png">
            </div>
          </div>
          <div class="item">
            <div class="img_box">
              <img src="../../assets/img/app_03.png">
            </div>
            <div class="title">
              APP签到
            </div>
            <div class="title_2">
              超级会员购物享双倍积分
            </div>
            <div class="title_3">
              - app专属 -
            </div>
          </div>
        </div>
        <div class="list_box">
          <div class="tab_box">
            <div class="letf_box">
              <div 
                class="item"
                :class="TabIndex === 0?'active': ''"
                @click="TabClick(0)"
              >
                积分明细
              </div>
              <div 
                class="item"
                :class="TabIndex === 1?'active': ''"
                @click="TabClick(1)"
              >
                积分收入
              </div>
              <div 
                class="item"
                :class="TabIndex === 2?'active': ''"
                @click="TabClick(2)"
              >
                积分支出
              </div>
            </div>
            <div class="right_box">
              仅显示最近半年记录
            </div>
          </div>
          <div class="tabal_box">
            <el-table
              :data="tableData"
              style="width: 100%"
              :header-cell-style="{textAlign: 'center'}"
              :cell-style="{ textAlign: 'center' }"
            >
              <el-table-column label="日期">
                <template slot-scope="scope">
                  {{ scope.row.dCreateTime }}
                </template>
              </el-table-column>
              <el-table-column label="收入/支出">
                <template slot-scope="scope">
                  {{ scope.row.iChangePoint }}
                </template>
              </el-table-column>
              <el-table-column label="积分类型/支出">
                <template slot-scope="scope">
                  {{ scope.row.cMemo }}
                </template>
              </el-table-column>
              <el-table-column label="积分详情">
                <template slot-scope="scope">
                  <div v-if="scope.row.cSourceCode !== '' && scope.row.cSourceCode !== undefined">
                    订单号
                    <span style="color: #f0406f;">
                      {{ scope.row.cSourceCode }}</span>
                  </div>
                  <div v-else />
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination_box">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="pagetotal"
              :current-page.sync="pageIndex"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Integral',
  components: {},
  data() {
    return {
        banner: '',
        TabIndex: 0,
        tableData: [],
        pageIndex: 1,
        pageSize: 10,
        pagetotal: 0
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.GetBanner()
    this.getPointDetailData(this.TabIndex)
  },

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 获取banner
    GetBanner(){
        let params = {
            category_id: 3
        }
        this.$api.person.banner(params).then((res) => {
            console.log('获个人中心banner', res.data[0])
            this.banner = res.data[0].image
        })
    },
    // 分页获取当前页
    handleCurrentChange(val) {
      console.log("获取当前页", val);
      this.pageIndex = val;
      this.getPointDetailData(this.TabIndex)
    },
    // 去购物
    GoToIndex() {
      this.$router.push({
        path: "/",
      })
    },
    // 获取积分列表
    getPointDetailData(addType) {
        let data ={
            iShopId: '',
            token: localStorage.getItem("token"),
            isGetLoginMember:true,
            addType: addType,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
        }
        this.$api.person.getPointDetail(data).then(res =>{
            console.log('获取积分列表', res)
            this.tableData = res.data.models
            this.pagetotal = res.data.modelsCount
        })
    },
    // tab 切换
    TabClick(TabClick) {
        this.TabIndex = TabClick
        this.getPointDetailData(this.TabIndex)
    },
  }
}
</script>

<style style lang='scss' scoped>
    #Integral{
        .banner_box{
            height: 33.125rem;
            position: relative;
        }
        .banner_content_box{
            height: 33.125rem;
            display: flex;
            align-items: center;
            justify-items: center;
            flex-direction: column;
            .content_box{
                width: 12.5rem;
                height: 12.5rem;
                border-radius: 100%;
                background-image: linear-gradient(#dec38c, #c3a567);
                margin-top: 120px;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                flex-direction: column;
                .p1{
                    font-size: 3rem;
                    font-weight: 400;
                }
                .p2{
                    font-size: 1.5rem;
                    font-weight: 400;
                    margin-top: .2rem;
                }
            }
            .sanjiao_box{
                width: 0;
                height: 0;
                border: 10px solid;
                border-color: transparent transparent #c3a567;
            }
            .titme{
                background: #c3a567;
                height: 2rem;
                border-radius: 1rem;
                padding: 0 2rem;
                display: flex;
                justify-content: center;
                align-items: center;
                p{
                    font-size: 1rem;
                    color: #fff;
                    font-weight: 400;
                }
            }
            .tip{
                font-size: .8rem;
                color: #fff;
                font-weight: 400;
                height: 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .big_content_box{
            display: block;
            padding: 2.19rem 0;
            position: relative;
            z-index: 9;
            bottom: 9rem;
            margin-bottom: -10rem;
            .content_box{
                padding: 0 16.19rem;
                display: flex;
                // justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                flex-direction: row;
                .top_box{
                    background: #fff;
                    height: 16rem;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-items: center;
                    margin-bottom: 1.44rem;
                    .item{
                     border-left: 2px solid #e9e9e9;
                     display: flex;
                     justify-content: center;
                     flex-direction: column;
                     width: 24%;
                     height: 16rem;
                     align-items: center;
                     .title{
                         font-size: 1.5rem;
                         font-weight: bolder;
                         color: #c3a567;
                         margin: .3rem 0 .5rem 0;

                     }
                     .title_2{
                         font-size: .8rem;
                         margin: .3rem 0 1rem 0;
                         font-weight: 400;
                     }
                     .button{
                         color: #fff;
                         background: #bc9759;
                         font-size: 1rem;
                         padding: .5rem 1rem;
                         cursor: pointer;
                     }
                     .title_3{
                         font-size: 1rem;
                         padding: .5rem 1rem;
                        //  cursor: pointer;
                     }
                    }
                    .item:first-child{
                        border: none;
                    }
                }
                .list_box{
                    background: #fff;
                    display: flex;
                    width: 100%;
                    flex-direction: column;
                    padding: 1.44rem;
                    .tab_box{
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                        align-items: center;
                        height: 2rem;
                        align-content: center;
                        font-size: .8rem;
                        margin-bottom: 1.44rem;
                        .letf_box{
                            display: flex;
                            justify-content: space-between;
                            width: 25rem;
                            height: 2rem;
                            align-items: center;
                            font-weight: 400;
                            .item{
                                cursor: pointer;
                                height: 1.5rem;
                                font-size: 1rem;
                            }
                            .item:hover{
                                color: #f0406f;
                            }
                            .active{
                                height: 1.5rem;
                                border-bottom: 2px solid #f0406f;
                                color: #f0406f;
                                font-size: 1rem;
                            }
                        }
                        .right_box{
                            cursor: pointer;
                        }
                    }
                    // .tabal_box{

                    // }
                    .pagination_box {
                        display: flex;
                        justify-content: center;
                        height: 3rem;
                        align-items: center;
                    }
                }
                
            }
        }
    }

</style>
<style>

.pagination_box
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: rgba(17, 17, 17, 1);
  color: #fff;
}
.pagination_box .el-pagination.is-background .el-pager li:hover {
  color: rgba(17, 17, 17, 1);
}
</style>